import React from "react";
import './login.css'
import './reset.css'
export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            val:'',
            password:'',
            login:[],
            red:false,
            word:false,
        }
    }
    componentDidMount(){
  
    }

    passwordhandele(e){
        this.setState({
            password:e.target.value
        })
    }
    valhandele(e){
        this.setState({
            val:e.target.value
        })
    }
    land(){
        console.log(this.state.login.account);
        console.log(this.state.val);
        console.log(this.state.password);
        if(this.state.red===false&&this.state.word===false){
            this.$axios
            .post('https://apipc-xiaotuxian-front.itheima.net/login',
            {
                account: this.state.val,
                password: this.state.password
            })
            .then(res=>{
                console.log(res);
                if(res.data.msg=='操作成功'){
                    this.setState({
                        login:res.data.result
                    })
                    // localStorage.setItem('token',res.data.result.token)
                    localStorage.setItem('account',res.data.result.account) 
                        alert('登录成功')
                        window.location.href = '/'
                }

            })
        }else{
            alert('请输入完整账号密码')
        }



    }

    //账号失焦
    blurhandele(){
        var reg=/^[a-zA-Z][a-zA-Z0-9_]{6,20}$/
        var res=reg.test(this.state.val)
        if(res==false){
            this.setState({
                red:true
            })
        }else{
            this.setState({
                red:false
            })
        }
    }
    //密码失焦
    blur(){
        var reg=/^[a-zA-Z0-9]{6,24}$/
        var res=reg.test(this.state.password)
        if(res==false){
            this.setState({
                word:true
            })
        }else{
            this.setState({
                word:false
            })
        }
    }

    render() {
        return <div>
            <div data-v-37dfd6fc="" id="app">
                <header data-v-37dfd6fc="" className="login-header">
                    <div data-v-37dfd6fc="" className="commonwidth">
                        <h1 data-v-37dfd6fc="" className="logo">
                            <a data-v-37dfd6fc="" href="#!">小兔鲜</a>
                        </h1>
                        <h3 data-v-37dfd6fc="" className="sub">欢迎登录</h3>
                        <a data-v-37dfd6fc="" href="/#/" className="entry">
                            进入网站首页
                            <i data-v-37dfd6fc="" className="iconfont icon-angle-right"></i
                            ><i data-v-37dfd6fc="" className="iconfont icon-angle-right"></i
                            ></a>
                    </div>
                </header>
                <section data-v-37dfd6fc="" className="login-section">
                    <div data-v-37dfd6fc="" className="wrapper">
                        <nav data-v-37dfd6fc="">
                         账户登录
                        </nav>
                        <div data-v-37dfd6fc="" className="account-box">
                            <div data-v-37dfd6fc="" className="toggle">
                              <i data-v-37dfd6fc="" className="iconfont icon-envelope-o"></i>
                                    使用短信登录
                            
                            </div>
                            <form
                                data-v-37dfd6fc=""
                                noValidate="noValidate"
                                autoComplete="off"
                                className="form"
                            >
                                <div data-v-37dfd6fc="" className="form-item">
                                    <div data-v-37dfd6fc="" className="input">
                                        <i data-v-37dfd6fc="" className="iconfont icon-user-o"></i
                                        ><input
                                            data-v-37dfd6fc=""
                                            type="text"
                                            placeholder="请输入用户名"

                                            onBlur={this.blurhandele.bind(this)}
                                            onChange={this.valhandele.bind(this)}
                                            value={this.state.val}
                                            name="account"
                                        />
                                        {this.state.val==''&&<p className='valworing'>请输入账号</p>}
                                        {this.state.val&&this.state.red&&<p className='valworing'>字母开头且6-20个字符</p>}
                                    </div>
                                </div>
                                <div data-v-37dfd6fc="" className="form-item">
                                    <div data-v-37dfd6fc="" className="input">
                                        <i data-v-37dfd6fc="" className="iconfont icon-lock8"></i
                                        ><input
                                            data-v-37dfd6fc=""
                                            value={this.state.password}
                                            type="password"
                                            onChange={this.passwordhandele.bind(this)}
                                            onBlur={this.blur.bind(this)}

                                            placeholder="请输入密码"
                                            name="pass"

                                        />
                                         {this.state.password==''&&<p className='passworing'>请输入密码</p>}
                                         {this.state.password&&this.state.word&&<p className='passworing'>密码6-24个字符</p>}
                                    </div>
                                </div>
                                <div data-v-37dfd6fc="" className="form-item">
                                    <div data-v-37dfd6fc="" className="agree">
                                        <span data-v-37dfd6fc="">我已同意</span
                                        >《隐私条款》<span data-v-37dfd6fc="">和</span
                                        >《服务条款》
                                    </div>
                                </div>
                                <div className="btn" onClick={this.land.bind(this)} >登录</div>
                            </form>
                            <div data-v-37dfd6fc="" className="action">
                                <a
                                    data-v-37dfd6fc=""
                                    href="https://graph.qq.com/oauth2.0/authorize?client_id=101941968&amp;response_type=token&amp;scope=all&amp;redirect_uri=http%3A%2F%2Ferabbit.itheima.net%2F%23%2Flogin%2Fcallback"
                                ><img
                                        data-v-37dfd6fc=""
                                        src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"
                                        alt=""
                                    /></a>
                                <div data-v-37dfd6fc="" className="url">
                                  忘记密码免费注册
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <footer data-v-37dfd6fc="" className="login-footer">
                    <div data-v-37dfd6fc="" className="commonwidth">
                        <p data-v-37dfd6fc="">
                            <a data-v-37dfd6fc="" href="#!">关于我们</a
                            ><a data-v-37dfd6fc="" href="#!">帮助中心</a
                            ><a data-v-37dfd6fc="" href="#!">售后服务</a
                            ><a data-v-37dfd6fc="" href="#!">配送与验收</a
                            ><a data-v-37dfd6fc="" href="#!">商务合作</a
                            ><a data-v-37dfd6fc="" href="#!">搜索推荐</a
                            ><a data-v-37dfd6fc="" href="#!">友情链接</a>
                        </p>
                        <p data-v-37dfd6fc="">CopyRight © 小兔鲜儿</p>
                    </div>
                </footer>
            </div>
        </div>
    }
}